<template>
	<view class="rich flex_c" @click="close">
		<view class="title">说明</view>
		
		<view class="content">
			<scroll-view scroll-y="true">
				<view class="text">心心相印是我圈趣味玩法，用户给喜欢的主播或用户赠送心心相印对方增加10个pk值，不增加实际收入分成和魅力值。主播或用户获得一个心心相印，我圈从一下礼物池中随机赠送一个礼物。赠送的随机礼物根据实际价值参与收益分成和增加魅力值，同时赠送方也增加相对应的财富值。</view>
				<view class="table" v-for="(item,index) in prizes" :key="index">
					<view class="label">【{{ item.name }}】赠送的虚拟礼物数量如下：</view>
					<view class="grid">
						<u-grid :border="false" :col="3">
							<u-grid-item v-for="(val,i) in item.prizeList" :key="i">
								<view class="item flex_c">
									<view class="name flex_r_around">
										<text class="hidden">{{ val.name }}</text>
									</view>
									<view class="image">
										<image :src="val.img" mode="aspectFill"></image>
									</view>
									<view class="price">
										<i>{{ Number(val.gold_price).toFixed(0) }}</i>
										<text>金币</text>
									</view>
									<view class="progress">{{ val.odds }}</view>
								</view>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
				
				<view class="text">警告：赠送数量有限，理性消费。严禁任何人通过本活动参与博彩等违法活动。如发现将没收所有非法收入，并永久禁止加入我圈。涉及情节严重者我圈保留所有证据，并依法追究法律责任。</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'rich',
		props: {
			prizes: {
				type: Array,
				default: () => [],
			},
		},
		data() {
			return {

			}
		},
		methods: {
			close() {
				this.$emit('closeModal')
			},
		}
	}
</script>

<style lang="less" scoped>
	.rich {
		background: url('https://qiniu-cdn.maeiyun.com//h5static/prize/page.png') 0 -20rpx repeat;
		background-size: cover;
		background-color: #7A7489;
		padding: 36rpx 0 0;
		height: 100vh;
		border-radius: 68rpx 68rpx 0 0;
	}

	.title {
		font-family: 'gongfu';
		font-size: 48rpx;
		color: #FFFFFF;
		line-height: 58rpx;
		text-shadow: 0px 2px 14px #B30976;
	}
	
	.content {
		width: 100%;
		padding: 40rpx 32rpx;
		background: linear-gradient( 180deg, rgba(163,137,177,.0) 0%, #A389B1 20%);
		flex: 1;
		overflow: hidden;
		scroll-view {
			height: 100%;
		}
	}
	
	.text {
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 40rpx;
	}
	
	.table {
		border-radius: 40rpx;
		border: 2rpx solid #FFF;
		background: rgba(255, 255,255 0.4);
		margin: 24rpx 0 20rpx;
		padding: 24rpx;
		
		.label {
			font-weight: 600;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			margin-bottom: 30rpx;
		}
		
		.grid {
			margin: 0 40rpx;
			/deep/ .u-grid-item--hover-class {
				opacity: 1;
			}
			.item {
				width: 152rpx;
				height: 200rpx;
				margin-bottom: 16rpx;
				background: rgba(140,0,255,0.41);
				border-radius: 24rpx;
				border: 2rpx solid #FD38B7;
				
				.name {
					width: 104rpx;
					height: 32rpx;
					background: rgba(254,93,187,0.79);
					border-radius: 0rpx 0rpx 16rpx 16rpx;
					border: 2rpx solid #FD38B7;
					
					text {
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
					}
				}
				
				.image {
					width: 56rpx;
					height: 56rpx;
					margin: 4rpx 0 0;
					image {
						width: 56rpx;
						height: 56rpx;
					}
				}
				
				.price {
					i {
						font-weight: 600;
						font-size: 24rpx;
						color: #FFF;
						font-style: normal;
					}
					
					text {
						font-size: 24rpx;
						color: #FFF;
					}
				}
				
				.progress {
					font-size: 24rpx;
					color: #FFFFFF;
					transform: scale(0.8);
				}
			}
		}
	}
	
	
</style>